<template>
  <div>
      <div class="box">
        <div class="top_box">
          <!-- <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          style="margin-left: 30px"
          active-background-color="#fff"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/centre/platform">数据概况</el-menu-item>
          <el-menu-item index="/centre/platformO">测评</el-menu-item>
          <el-menu-item index="/centre/platformT">咨询</el-menu-item>
          <el-menu-item index="/centre/platformS">直播</el-menu-item>
          <el-menu-item index="/centre/platformF">倾诉</el-menu-item>
          <el-menu-item index="/centre/platformV">训练营</el-menu-item>
          <el-menu-item index="/centre/platformX">课程</el-menu-item>
          <el-menu-item index="/centre/platformW">冥想馆</el-menu-item>
          <el-menu-item index="/centre/platformA">心理之窗</el-menu-item>
        </el-menu> -->
          <div class="top_in">
            <!-- <div class="insj">
              <el-checkbox
                v-model="checked1"
                @change="inp1()"
                style="margin-right: 10px"
                >时间范围</el-checkbox
              ><t-date-range-picker :disabled="flay" v-model="riqi" />
            </div> -->
            <div class="ingj">
              <el-checkbox v-model="checked2" @change="inp1()"
                >高级条件</el-checkbox
              >
            </div>
            <div class="ingj">
              <el-select
                v-model="value1"
                @change="inputcli()"
                placeholder="按天分析"
                :disabled="!flay"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="value2"
                :disabled="!flay"
                @change="inputc"
                placeholder="按天分析"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <!-- <div class="ingj">
            组织架构：
            <el-select v-model="value3" placeholder="按天分析">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div> -->
            <div class="btn">
              <el-button @click="cz()">重置</el-button>
              <el-button type="primary" @click="cx()">查询</el-button>
            </div>
          </div>
        </div>
        <div class="zhuyao">
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="name" label="Name" />
            <el-table-column prop="amount1" label="Amount 1" />
            <el-table-column prop="amount2" label="Amount 2" />
            <el-table-column prop="amount3" label="Amount 3" />
          </el-table>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
// import type { TableColumnCtx } from 'element-plus'
import { MessagePlugin } from "tdesign-vue-next";
import{ getOrg} from '../../api/analyse'
import * as echarts from "echarts";
const value1 = ref(0);
const value2 = ref("2");
const value3 = ref(0);
const value4 = ref("近7天");
let checked2 = ref(true);
let checked1 = ref(false);
let Echart_1 = ref(null);
let Echart_2 = ref(null);
let Echart_3 = ref(null);
let Echart_4 = ref(null);
let Echart_5 = ref(null);
let Echart_6 = ref(null);
let Echart_7 = ref(null);
let Echart_8 = ref(null);
let Echart_9 = ref(null);
let Echart_10 = ref(null);
let loding = ref(true);
let zlzl = ref(0);
let riqi = ref([]);
let fwrs = ref(0);
const tableData = ref([
  {
    id: "12987122",
    name: "王小虎",
    amount1: "234",
    amount2: "3.2",
    amount3: 10,
  },
  {
    id: "12987123",
    name: "王小虎",
    amount1: "165",
    amount2: "4.43",
    amount3: 12,
  },
  {
    id: "12987124",
    name: "王小虎",
    amount1: "324",
    amount2: "1.9",
    amount3: 9,
  },
  {
    id: "12987125",
    name: "张小路",
    amount1: "621",
    amount2: "2.2",
    amount3: 17,
  },
  {
    id: "12987126",
    name: "王小虎",
    amount1: "539",
    amount2: "4.1",
    amount3: 15,
  },
]);
const filterTableData = () => {
    let contactDot = 0;
    tableData.value.forEach((item, index) => {
        if (index == 0) {
            state.spanArr.push(1)
        } else {
            if (item.name === tableData.value[index - 1].name) {
                state.spanArr[contactDot] += 1;
                state.spanArr.push(0)
            } else {
                contactDot = index
                state.spanArr.push(1)
            }
        }
    })
}
const filterTableData1 = () => {
    let contactDot = 0;
    tableData.value.forEach((item, index) => {
        if (index == 0) {
            state.spanArr1.push(1)
        } else {
            if (item.name === tableData.value[index - 1].name && item.name === tableData.value[index - 1].name) {
                state.spanArr1[contactDot] += 1;
                state.spanArr1.push(0)
            } else {
                contactDot = index
                state.spanArr1.push(1)
            }
        }
    })
}
let state = reactive({
  spanArr: [],
  spanArr1: [],
});
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    //columnIndex  第几列
    if (state.spanArr[rowIndex]) {
      return {
        rowspan: state.spanArr[rowIndex], //要合并的行数
        colspan: 1, //要合并的行数
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  if (columnIndex === 1) {
    //第二列
    if (state.spanArr1[rowIndex]) {
      return {
        rowspan: state.spanArr1[rowIndex],
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
const options = [
  {
    value: 0,
    label: "按天分析",
  },
  {
    value: 1,
    label: "按月度",
  },
  {
    value: 2,
    label: "按季度",
  },
  {
    value: 3,
    label: "按年度",
  },
];
let options1 = ref([
  {
    value: "1",
    label: "近7天",
  },
  {
    value: "2",
    label: "近30天",
  },
  {
    value: "3",
    label: "近90天",
  },
]);
let flay = ref(true);
const options2 = [
  {
    value: 0,
    label: "集团公司",
  },
  {
    value: 1,
    label: "子/分公司",
  },
  {
    value: 2,
    label: "部门",
  },
];
const options3 = [
  {
    value: "近7天",
    label: "近7天",
  },
  {
    value: "近30天",
    label: "近30天",
  },
];
const inputcli = () => {
  if (value1.value === 0) {
    options1.value = [
      {
        value: "1",
        label: "近7天",
      },
      {
        value: "2",
        label: "近30天",
      },
      {
        value: "3",
        label: "近90天",
      },
    ];
    value2.value = "2";
  } else if (value1.value === 1) {
    options1.value = [
      {
        value: "4",
        label: "近6个月",
      },
      {
        value: "5",
        label: "近12个月",
      },
    ];
    value2.value = "4";
  } else if (value1.value === 2) {
    options1.value = [
      {
        value: "6",
        label: "近一个季度",
      },
      {
        value: "7",
        label: "近两个季度",
      },
      {
        value: "8",
        label: "近三个季度",
      },
      {
        value: "9",
        label: "近四个季度",
      },
    ];
    value2.value = "6";
  } else {
    options1.value = [
      {
        value: "10",
        label: "近一年",
      },
      {
        value: "11",
        label: "近两年",
      },
    ];
    value2.value = "10";
  }
};
const inp1 = () => {
  flay.value = !flay.value;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
};
const inputc = (ev) => {
  value2.value = ev;
};
const riqijs = () => {
  // 获取今天的时间
  const today = new Date();

  // 获取未来第30天的时间
  const futureDate = new Date();
  futureDate.setDate(today.getDate() - 30);

  // 将时间格式化为字符串
  const todayStr = today.toISOString().slice(0, 10);
  const futureDateStr = futureDate.toISOString().slice(0, 10);
  // 输出结果
  riqi.value = [futureDateStr, todayStr];
};
let cp = ref(0);
let sc = ref(0);
let acsi = ref([]);
let dataarrq = ref([]);
const api = async () => {
const res= await getOrg({
  customerID:706
})
console.log(res);
 state.spanArr = []
    state.spanArr1 = []
    filterTableData()
    filterTableData1()
};
//重置
const cz = async () => {
  flay.value = true;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
  options1.value = [
    {
      value: "1",
      label: "近7天",
    },
    {
      value: "2",
      label: "近30天",
    },
    {
      value: "3",
      label: "近90天",
    },
  ];
  value2.value = "2";
  MessagePlugin.loading("正在加载中");
  loding.value = true;
  const res1 = await getplat({
    category: "12",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  const res0 = await getplatlist({
    category: "12",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  Echart_1 = echarts.init(document.getElementById("chart_zhe"));
  const eacdata = {
    time: [],
    zl: [],
    fww: [],
    cprs: [],
    tjda: [],
    scrs: [],
  };
  res0.data[0].pvnum.forEach((item) => {
    eacdata.time.push(item.createtime);
    eacdata.zl.push(item.pvnum);
  });
  res0.data[0].uvnum.forEach((item) => {
    eacdata.fww.push(item.uvnum);
  });
  res0.data[0].snum.forEach((item) => {
    eacdata.cprs.push(item.snum);
  });
  res0.data[0].snumName.forEach((item) => {
    if (item.name === null) return;
    eacdata.tjda.push(item);
  });
  dataarrq.value = eacdata.tjda;
  acsi.value = dataarrq.value.slice(0, 6);
  let optionCS = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["浏览量", "访问人数", "观看人数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "浏览量",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "访问人数",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "观看人数",
        type: "line",
        smooth: true,
        data: [],
      },
    ],
  };
  optionCS.xAxis.data = eacdata.time;
  optionCS.series[0].data = eacdata.zl;
  optionCS.series[1].data = eacdata.fww;
  optionCS.series[2].data = eacdata.cprs;

  Echart_1.setOption(optionCS);
  zlzl.value = res1.data[0].pvnum;
  fwrs.value = res1.data[0].uvnum;
  cp.value = res1.data[0].snum;
  sc.value = res1.data[0].scount;
  loding.value = false;
  MessagePlugin.closeAll();
  MessagePlugin.success("加载成功");
};
//查询
const cx = async () => {
  if (flay.value) {
    loding.value = true;
    MessagePlugin.loading("正在查询中", 0);
    const res1 = await getplat({
      category: "12",
      type: value2.value,
      starttime: "",
      endtime: "",
    });
    const res0 = await getplatlist({
      category: "12",
      type: value2.value,
      starttime: "",
      endtime: "",
    });
    Echart_1 = echarts.init(document.getElementById("chart_zhe"));
    if (value1.value === 0 || value1.value === 1) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      res0.data[0].pvnum.forEach((item) => {
        eacdata.time.push(item.createtime);
        eacdata.zl.push(item.pvnum);
      });
      res0.data[0].uvnum.forEach((item) => {
        eacdata.fww.push(item.uvnum);
      });
      res0.data[0].snum.forEach((item) => {
        eacdata.cprs.push(item.snum);
      });
      res0.data[0].snumName.forEach((item) => {
        if (item.name === null) return;
        eacdata.tjda.push(item);
      });
      dataarrq.value = eacdata.tjda;
      acsi.value = dataarrq.value.slice(0, 6);
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数", "观看人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "观看人数",
            type: "line",
            smooth: true,
            data: [],
          },
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
      optionCS.series[2].data = eacdata.cprs;

      Echart_1.setOption(optionCS);
    } else if (value1.value === 2) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      res0.data.forEach((item, index) => {
        if (item.snumName !== undefined) return;
        eacdata.time.push(item.quarter);
        eacdata.zl.push(item.pvnum);
        eacdata.fww.push(item.uvnum);
        eacdata.cprs.push(item.snum);
      });
      res0.data[res0.data.length - 2].snumName.forEach((item) => {
        if (item.name === null) return;
        eacdata.tjda.push(item);
      });
      dataarrq.value = eacdata.tjda;
      acsi.value = dataarrq.value.slice(0, 6);
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数", "观看人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "观看人数",
            type: "line",
            smooth: true,
            data: [],
          },
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
      optionCS.series[2].data = eacdata.cprs;

      Echart_1.setOption(optionCS);
    } else if (value1.value === 3) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      console.log(res0.data[res0.data.length - 2].snumName);
      res0.data.forEach((item, index) => {
        if (item.snumName !== undefined) return;
        eacdata.time.push(item.years);
        eacdata.zl.push(item.pvnum);
        eacdata.fww.push(item.uvnum);
        eacdata.cprs.push(item.snum);
      });
      if (res0.data[res0.data.length - 2].snumName === undefined) {
        res0.data[res0.data.length - 1].snumName.forEach((item) => {
          if (item.name === null) return;
          eacdata.tjda.push(item);
        });
      } else {
        res0.data[res0.data.length - 2].snumName.forEach((item) => {
          if (item.name === null) return;
          eacdata.tjda.push(item);
        });
      }
      dataarrq.value = eacdata.tjda;
      acsi.value = dataarrq.value.slice(0, 6);
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数", "观看人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "观看人数",
            type: "line",
            smooth: true,
            data: [],
          },
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
      optionCS.series[2].data = eacdata.cprs;

      Echart_1.setOption(optionCS);
    }
    MessagePlugin.closeAll();
    MessagePlugin.success("查询成功");
    loding.value = false;
    zlzl.value = res1.data[0].pvnum;
    fwrs.value = res1.data[0].uvnum;
    cp.value = res1.data[0].snum;
    sc.value = res1.data[0].scount;
  } else {
    loding.value = true;
    MessagePlugin.loading("正在查询中", 0);
    const res1 = await getplat({
      category: "12",
      type: "",
      starttime: riqi.value[0] + " 00:00:00",
      endtime: riqi.value[1] + " 00:00:00",
    });
    const res0 = await getplatlist({
      category: "12",
      type: "",
      starttime: riqi.value[0] + " 00:00:00",
      endtime: riqi.value[1] + " 00:00:00",
    });
    Echart_1 = echarts.init(document.getElementById("chart_zhe"));
    const eacdata = {
      time: [],
      zl: [],
      fww: [],
      cprs: [],
      tjda: [],
      scrs: [],
    };
    console.log(res0);
    res0.data[0].pvnum.reverse();
    res0.data[0].uvnum.reverse();
    res0.data[0].snum.reverse();
    res0.data[0].snumName.reverse();
    res0.data[0].pvnum.forEach((item) => {
      eacdata.time.push(item.createtime);
      eacdata.zl.push(item.pvnum);
    });
    res0.data[0].uvnum.forEach((item) => {
      eacdata.fww.push(item.uvnum);
    });
    res0.data[0].snum.forEach((item) => {
      eacdata.cprs.push(item.snum);
    });
    res0.data[0].snumName.forEach((item) => {
      if (item.name === null) return;
      eacdata.tjda.push(item);
    });
    dataarrq.value = eacdata.tjda;
    acsi.value = dataarrq.value.slice(0, 6);
    let optionCS = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["浏览量", "访问人数", "观看人数"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: true,
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "浏览量",
          type: "line",

          smooth: true,
          data: [],
        },
        {
          name: "访问人数",
          type: "line",

          smooth: true,
          data: [],
        },
        {
          name: "观看人数",
          type: "line",
          smooth: true,
          data: [],
        },
      ],
    };
    optionCS.xAxis.data = eacdata.time;
    optionCS.series[0].data = eacdata.zl;
    optionCS.series[1].data = eacdata.fww;
    optionCS.series[2].data = eacdata.cprs;
    Echart_1.setOption(optionCS);
    loding.value = false;
    MessagePlugin.closeAll();
    MessagePlugin.success("查询成功");
    zlzl.value = res1.data[0].pvnum;
    fwrs.value = res1.data[0].uvnum;
    cp.value = res1.data[0].snum;
    sc.value = res1.data[0].scount;
  }
};

onMounted(() => {
  riqijs();
    api();
});
onUnmounted(() => {
  MessagePlugin.closeAll();
});
</script>

<style lang="scss" scoped>
.box {
  .blaek {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: 85%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  width: calc(100% - 30px);
  padding-left: 10px;

  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
  }
  .el-menu--horizontal {
    border-bottom: none;
  }
  .top_in {
    width: 100%;
    // margin-left: 50px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    .ingj {
      margin-left: 40px;
      .el-select {
        width: 100px !important;
        margin-right: 20px;
      }
    }
    .btn {
      width: 150px;
      height: 30px;
      justify-content: space-between;
      .el-button {
        width: 65px;
      }
    }
  }
  .zhuyao {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .el-select {
      width: 100px !important;
      margin-right: 20px;
    }
    .til {
      font-size: 14px;
      margin-left: 20px;
      text-indent: 5px;
    }
    .tilbox {
      width: 60%;
      height: 80px;
      // margin-left: 60px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      .tiitem {
        width: 30%;
        height: 100%;
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #409eff;
        .niuw {
          font-size: 14px;
          color: #000;
          font-weight: 500;
        }
        .wen {
          position: relative;
          width: 10px;
          height: 10px;
          left: 5px;
          line-height: 10px;
          text-indent: 5px;
          background: #409eff;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          .hov {
            position: absolute;
            left: -34px;
            top: 24px;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            color: #000;
            display: none;
            white-space: nowrap;
            background: rgb(255, 233, 204);
          }
        }
        .wen:hover {
          .hov {
            display: block;
          }
        }
      }
    }
  }
  .each_title {
    // border-left: 4px solid;
    // border-image: linear-gradient(
    //     to bottom,
    //     rgb(124, 100, 199) 20%,
    //     rgb(59, 182, 254) 70%
    //   )
    //   1;
  };
  .eca {
    width: 95%;
    height: 300px;
    margin: auto;
    margin-top: 20px
    div {
      width: 100%;
      height: 100%;
    }
  }
  .boxtj {
    margin: auto;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
    .zijibox {
      position: relative;
      width: 120px;
      height: 100px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 33px;
      color: #409eff;
      border: solid 2px #000;
      .dhwid {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .xx {
        position: absolute;
        right: 10px;
        top: 9px;
      }
    }
    .zijibox1 {
      margin-top: 45px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.boxgg {
  width: 100%;
  display: flex;
  margin-top: -10px;
  justify-content: space-between;
}
.baitiao {
  position: absolute;
  width: 100%;
  height: 11px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  left: 0;
  bottom: -7px;
}
.echats-box {
  width: 49.5%;
  height: 100%;
  position: relative;
  .echats-title {
    padding: 0 5px;
    position: relative;
    top: 25px;
    line-height: 3;
    left: auto;
    z-index: 999;
    text-indent: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fff;
  }
}
.echats-item {
  flex: none;
  width: 100%;
  height: 375px;
  border-radius: 10px;
  background: rgb(247, 247, 247);
  div {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
.eca_1 {
  width: 95%;
  height: 500px;
  margin: auto;
  margin-top: 20px;
  .casboxq {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-around;
    div {
      width: 30%;
      height: 100%;
      //   background: red;
    }
  }
}
.fwel {
  display: flex;
  justify-content: space-around;
  height: 50% !important;
  width: 100%;
}
.itewaw {
  display: flex;
  width: 100%;
  justify-content: space-around;
  div {
    width: 49% !important;
    height: 100%;
  }
}
</style>
